﻿<%@ Page Title="" Language="C#" MasterPageFile="BGMasterPage.master" AutoEventWireup="true"
    CodeFile="CardList.aspx.cs" Inherits="CardList" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHeader" runat="Server">
    <link href="styles/CardList.css" type="text/css" rel="Stylesheet" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphContent" runat="Server">
    <div id="cardList" class="cardPart">
        <div id="searchBar">
            <span id="searchCondition">
                <input id="search_condition" class="search_condition" type="text" name="search_condition">
                <label id="search_holder" class="prompt search_prompt" for="search_condition">
                    搜索姓名、公司、地址和备注</label>
                <span class="search_delete_icon"></span></span><span id="searchBtn"></span>
        </div>
        <!-- 更新名片提示 -->
        <div class="update_tip" id="update_tip" style="display: none;">
            <span id="update_tip_text">0</span>位联系人名片信息有更新<a class="button_cancel" id="show_update_dialog"><span>查看</span></a></div>
        <div class="update_tip" id="update_complete">
            更新已完成</div>
        <div id="sortBar">
        <span id="progressBarDiv"></span>
            <asp:CheckBox runat="server" ID="chkSearchAll" ClientIDMode="Static" Text="在全部名片里查找" />
            <asp:DropDownList ID="sortOrder" runat="server" ClientIDMode="Static">
            <asp:ListItem Text="按姓名排序" Value="0" Selected="True"></asp:ListItem>
            <asp:ListItem Text="按添加时间排序" Value="1"></asp:ListItem>
            </asp:DropDownList>
        </div>
        <div id="tip_drag_to_group" class="none_alert" style="display: none;">
            <span>拖动名片即可进行分组</span>
            <div class="none_close" onclick="CC.Card.closeDragTip()">
            </div>
        </div>
        <div id="cardContainer" style="height: 211px; min-height: 500px;">
            <%var index = 0; foreach (var card in CardInfoList)
              { %>
            <div id="<%=card.ID %>" class="cardThumbView <%=index==0?"cardThumbView_hover":"" %>">
                <div class="cardThumb_noBg cardThumbPart">
                    <img rel="CardImages/<%=card.FrontPic %>" onerror="" onload="" src="CardImages/<%=card.FrontPic %>"
                        style="border: 1px solid rgb(255, 255, 255);">
                    <div class="">
                    </div>
                </div>
                <div class="card_shadow cs_">
                </div>
                <div class="cardIntro cardThumbPart">
                    <p class="cardIntro_name">
                        <%=card.Name%></p>
                    <p class="cardIntro_title">
                        <%=card.Nickname%>
                    </p>
                    <p class="cardIntro_company">
                    </p>
                </div>
            </div>
            <%index++;
              } %>
        </div>
    </div>
    <div id="cardDetail" class="cardPart" style="height: 588px;">
        <div id="functionBar">
            <div id="functionBarPart2" class="functionBarPart">
                <div id="fb_delete_edit">
                    <%if (CurrentCard.FavoriteInfo != null)
                      { %>
                    <a id="btn_card_edit" class="button_cancel" onclick="removeFavorite(<%=CurrentCard.Summary.ID %>,<%=CurrentCard.FavoriteInfo.ID %>)">
                        <span>取消收藏</span></a>
                    <%}
                      else
                      { %>
                    <a id="btn_card_edit" class="button_cancel" onclick="addFavorite(<%=CurrentCard.Summary.ID %>)">
                        <span>收藏</span></a>
                    <%} %>
                    <%if (Manager.IsSystemUser())
                      { %>
                    <a id="btn_card_permissions" class="button_cancel" onclick="openCardPermissions(<%=CurrentCard.Summary.ID %>)">
                        <span>名片权限</span></a>
                    <%} %>
                    <a id="btn_card_remark" class="button_cancel" onclick="openRemark('<%=CurrentCard.Summary.CardID %>')">
                        <span>备注</span></a>
                </div>
            </div>
            <div id="cardImg_btn" style="display: none;">
                <ul>
                    <li class="cardImg_switcher cardImg_current" onclick="changePic(this,'cardFrontPic')">
                        正面</li>
                    <li class="cardImg_switcher" onclick="changePic(this,'cardBackPic')">背面</li>
                    <li id="btn_card_img_toggle" class="cardImg_switcher">备注</li>
                </ul>
            </div>
        </div>
        <div id="cardViewWraper">
            <div id="detail" class="detail">
                <div class="cardView_portrait">
                    <div class="cardView_leftPart">
                        <div class="portraitImg">
                        </div>
                    </div>
                    <div id="cardName" class="cardView_rightPart cardView_name">
                        <%=CurrentCard.Summary.Name %></div>
                </div>
                <div class="contact_sep">
                </div>
                <div class="cardView_same">
                    <div class="company_single">
                        <div class="cardView_detail linebreak">
                            <div class="cardView_leftPart">
                                <label>
                                    公司</label>
                                :</div>
                            <div id="cardCompany" class="cardView_rightPart">
                                <%foreach (var item in CurrentCard.Company)
                                  { %>
                                <%=item.Company %><br />
                                <%} %>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cardView_same">
                    <div class="cardView_detail linebreak">
                        <div class="cardView_leftPart">
                            <label>
                                电子邮箱
                            </label>
                            :
                        </div>
                        <div id="cardEmail" class="cardView_rightPart">
                            <%foreach (var item in CurrentCard.Email)
                              { %>
                            <a href="mailto:<%=item.Email %>" class="clickable email">
                                <%=item.Email %></a>
                            <%} %>
                        </div>
                    </div>
                </div>
                <div id="cardNumber">
                    <%if (CurrentCard.CellNumbers != "")
                      { %>
                    <div class="cardView_same">
                        <div class="cardView_leftPart">
                            <label>
                                手机
                            </label>
                            :
                        </div>
                        <div class="cardView_rightPart">
                            <%=CurrentCard.CellNumbers%>
                        </div>
                    </div>
                    <%} %>
                    <%if (CurrentCard.WorkNumbers != "")
                      { %>
                    <div class="cardView_same">
                        <div class="cardView_leftPart">
                            <label>
                                工作电话
                            </label>
                            :
                        </div>
                        <div class="cardView_rightPart">
                            <%=CurrentCard.WorkNumbers%>
                        </div>
                    </div>
                    <%} %>
                </div>
                <div id="QQ">
                    <%if (CurrentCard.QQ.Count > 0)
                      { %>
                    <div class="cardView_leftPart">
                        <label>
                            QQ</label>:</div>
                    <div class="cardView_rightPart">
                        <%foreach (var item in CurrentCard.QQ)
                          { %>
                        <a title="<%=item %>" href="tencent://message/?uin=<%=item %>&Site=&Menu=yes">
                            <img border="0" src="http://wpa.qq.com/pa?p=1:<%=item %>:2" alt="发起聊天"></a>&nbsp;
                        <%} %>
                    </div>
                    <%} %>
                </div>
                <div class="cardView_same">
                    <div class="cardView_detail linebreak">
                        <div class="cardView_leftPart">
                            <label>
                                工作地址
                            </label>
                            :
                        </div>
                        <div id="cardAddress" class="cardView_rightPart">
                            <%foreach (var item in CurrentCard.Address)
                              { %>
                            <a href="https://maps.google.com/maps?ie=UTF8&amp;source=CamCard&amp;q=<%=item.Address1 %>"
                                target="_blank" class="clickable address">
                                <%=item.Address1 %><br>
                            </a>
                            <%} %>
                        </div>
                    </div>
                </div>
                <div style="height: 10px;">
                </div>
            </div>
            <div id="cardImg_area" class="covers">
                <div id="cardImg_front" class="card_front cover" style="display: block;">
                    <img id="cardFrontPic" src="CardImages/<%=CurrentCard.Summary.FrontPic %>" class=""
                        onclick="" onload="" onerror="$('#cardFrontPic').attr('src','images/nocard.jpg')">
                    <img id="cardBackPic" src="CardImages/<%=CurrentCard.Summary.BackPic %>" class="noimg"
                        onclick="" onerror="$('#cardBackPic').attr('src','images/nocard.jpg')">
                </div>
                <div id="cardImg_note" class="card_note cover" style="display: none;">
                    <textarea onkeyup="" name="textarea_note" class="textarea_note" id="cc_note" note_id="0"
                        rel=""></textarea>
                    <div class="note_save_btn">
                        <a class="button_ok" onclick="CC.Ajax.SaveNote();"><span>保存</span></a></div>
                </div>
            </div>
        </div>
    </div>
    <asp:HiddenField ID="hidCategoryID" ClientIDMode="Static" Value="0" runat="server" />
</asp:Content>
<asp:Content ID="ContentBottom" ContentPlaceHolderID="Bottom" runat="server">
    <script type="text/javascript">
        $(function () {
            console.debug("window.height:" + $(window).height());
            $("#cardContainer").attr("style", "height: 211px; height: " + ($(window).height() - 84) + "px;");
            $("#cardList").attr("style", "height: " + ($(window).height() - 8) + "px;");
            $("#cardDetail").attr("style", "width:" + ($(window).width() - 376) + "px;height: " + ($(window).height() - 8) + "px;");
            $("#cardViewWraper").attr("style", "height:" + ($(window).height() - 64)+"px");
            $("#sortType_popup").click(function () {
                $(".popup_menu").attr("style", "display:block;");
            });
            $(".popup_menu li").each(function () {
                $(this).click(function () {
                    $(".popup_menu li").each(function () { $(this).attr("class", ""); });
                    $(this).attr("class", "select");
                    $("#sortType_popup>.sortType_name").text($(this).text());
                    $(".popup_menu").attr("style", "display:none;");
                });
            });
            $("#search_condition").focus(function () { $("#search_holder").text(""); });
            $("#search_condition").keydown(function () { if ($(this).val() != "") { $("#searchCondition > .search_delete_icon").show(); } else { $("#searchCondition>search_delete_icon").hide(); } });
            $("#searchCondition > .search_delete_icon").click(function () { $("#search_condition").val(""); $(this).hide(); $("#search_holder").text("搜索姓名、公司、地址和备注"); });
            initClickHandler();
        });

        function initClickHandler(){
            $("#cardContainer>.cardThumbView").each(function () {
                $(this).click(function () {
                    $("#cardContainer>.cardThumbView").each(function () { $(this).attr("class", "cardThumbView"); });
                    $(this).attr("class", "cardThumbView cardThumbView_hover");
                    GetCard($(this).attr("id"));
                });
            });
        }

        function changeData(data) {
            $("#cardName").text(data.Summary.Name);
            var text = "";
            for (var i = 0; i < data.Company.length; i++) {
                text += data.Company[i].Company + "<br/>";
            }
            $("#cardCompany").html(text);

            text = "";
            for (var i = 0; i < data.Email.length; i++) {
                text += "<a href=\"mailto:" + data.Email[i].Email + "\" class=\"clickable email\">" + data.Email[i].Email + "</a><br/>";
            }
            $("#cardEmail").html(text);

            text = "";
            var cellNumbers="";var workNumbers="";
            for (var i = 0; i < data.Number.length; i++) {
                if (data.Number[i].Type == "CELL") {
                    cellNumbers+=data.Number[i].Number+" ";
                } else {
                    workNumbers+=data.Number[i].Number+" ";
                }
            }
            if(cellNumbers!=""){
                text+="<div class=\"cardView_same\"><div class=\"cardView_leftPart\"><label>手机</label> :</div><div class=\"cardView_rightPart\">"+cellNumbers+"</div></div>";
            }
            if(workNumbers!=""){
                text+="<div class=\"cardView_same\"><div class=\"cardView_leftPart\"><label>工作电话</label> :</div><div class=\"cardView_rightPart\">"+workNumbers+"</div></div>";
            }
            $("#cardNumber").html(text);

            text = "";
            for (var i = 0; i < data.IM.length; i++) {
                if (data.IM[i].Type == "QQ") {
                    text+="<a title=\""+data.IM[i].Account+"\" href=\"tencent://message/?uin="+data.IM[i].Account+"&Site=&Menu=yes\"><img border=\"0\" src=\"http://wpa.qq.com/pa?p=1:"+data.IM[i].Account+":2\" alt=\"发起聊天\"></a>&nbsp;";
                } else {
                    //workNumbers+=data.Number[i].Number+" ";
                }
            }
            if(data.IM.length>0){
                text="<div class=\"cardView_leftPart\"><label>QQ</label>:</div><div class=\"cardView_rightPart\">"+text+"</div>";
            }
            $("#QQ").html(text)

            text = "";
            for (var i = 0; i < data.Address.length; i++) {
                text += "<a href=\"https://maps.google.com/maps?ie=UTF8&amp;source=CamCard&amp;q=" + data.Address[i].City + data.Address[i].Address1 + "\" target=\"_blank\" class=\"clickable address\">" + data.Address[i].City + data.Address[i].Address1 + "</a><br/>";
                if (data.Address[i].Address2 != "") {
                    text += "<a href=\"https://maps.google.com/maps?ie=UTF8&amp;source=CamCard&amp;q=" + data.Address[i].City + data.Address[i].Address2 + "\" target=\"_blank\" class=\"clickable address\">" + data.Address[i].City + data.Address[i].Address2 + "</a><br/>";
                }
            }
            $("#cardAddress").html(text)

            $("#cardFrontPic").attr("src", "CardImages/" + data.Summary.FrontPic);
            $("#cardBackPic").attr("src", "CardImages/" + data.Summary.BackPic);
            <%if (Manager.IsSystemUser()){ %>
            $("#btn_card_permissions").attr("onclick", "openCardPermissions('"+data.Summary.ID+"')");
            <%} %>
            if (data.FavoriteInfo) {
                $("#btn_card_edit").text("取消收藏");
                $("#btn_card_edit").attr("onclick", "removeFavorite("+data.Summary.ID+"," + data.FavoriteInfo.ID + ")");
                
            } else {
                $("#btn_card_edit").text("收藏");
                $("#btn_card_edit").attr("onclick", "addFavorite(" + data.Summary.ID + ")");
            }

            $("#btn_card_remark").attr("onclick","openRemark('"+data.Summary.CardID+"')");
        }

        function imgLoadFailed() {
            alert(this);
            $(this).attr("src", "images/nocard.jpg");
        }

        function changePic(li, imgID) {
            $("#cardImg_btn>ul>li").each(function () { $(this).attr("class", "cardImg_switcher") });
            $(li).attr("class", "cardImg_switcher cardImg_current");
            if (imgID == "cardFrontPic") {
                $("#cardImg_front").show();
                $("#cardImg_back").hide();
            } else {
                $("#cardImg_front").hide();
                $("#cardImg_back").show();
            }
        }

        function addFavorite(id) {
            $("#progressBarDiv").showProgressbar();
            $.ajax({ url: "Handler/CardHandler.ashx?mode=addFavorite&type=Card", data: "id=" + id, success: function (response) {
                $("#progressBarDiv").hideProgressbar();
                var data = $.parseJSON(response);
                if (data.Result) {
                    $("#btn_card_edit").text("取消收藏");
                    $("#btn_card_edit").attr("onclick", "removeFavorite(" + data.Favorite.ID + ")");
                    $.jqAlert("收藏成功！");
                } else {
                    $.jqAlert(data.Message, "收藏失败！");
                }
            }
            });
        }
        function removeFavorite(cardid,fid) {
            $("#progressBarDiv").showProgressbar();
            $.ajax({ url: "Handler/CardHandler.ashx?mode=removeFavorite", data: "cardid="+cardid+"&id=" + fid, success: function (response) {
                $("#progressBarDiv").hideProgressbar();
                var data = $.parseJSON(response);
                if (data.Result) {
                    $("#btn_card_edit").text("收藏");
                    $("#btn_card_edit").attr("onclick", "addFavorite(" + data.ID + ")");
                    <%if(IsFavorite){ %>
                    $("#"+data.ID).remove();
                    <%} %>
                    $.jqAlert("取消收藏成功！");
                } else {
                    $.jqAlert(data.Message, "取消收藏失败！");
                }
            }
            });
        }

        function openRemark(id){
            $.jqOpen('Remark.aspx?cardid='+id,{title:'备注管理',width:$(window).width()*0.75,height:$(window).height()*0.75})
        }
        //openCardPermissions
        function openCardPermissions(id){
            $.jqOpen('CardPermissions.aspx?id='+id,{title:'名片权限管理',width:$(window).width()*0.75,height:$(window).height()*0.75})
        }

        $(function(){
            $("#searchBtn").click(function(){
                $("#progressBarDiv").showProgressbar();
                var search_condition=$("#search_condition").val();
                if(search_condition==""){return;}
                <%if(string.IsNullOrEmpty(Request["mode"])){ %>
                var url="Handler/CardHandler.ashx?mode=getDatalist";
                <%}else{ %>
                var url="Handler/CardHandler.ashx?mode=getFavorite";
                <%} %>
                var data=null;
                if($("#chkSearchAll").get(0).checked){
                    data="condition="+search_condition+"&sortOrder=" +$("#sortOrder").val()+"&id=-1";
                }else{
                    data="condition="+search_condition+"&sortOrder=" +$("#sortOrder").val()+"&id="+$("#hidCategoryID").val()
                }
                $.ajax({ url: url, data: data , success: function (response) {
                        $("#progressBarDiv").hideProgressbar();
                        var data = $.parseJSON(response);
                        if (data.Result) {
                            if(data.DataList.length>0){
                                GetCard(data.DataList[0].ID);
                                var html="";
                                var c=null;
                                for(var i=0;i<data.DataList.length;i++){
                                    c=data.DataList[i];
                                    if(c.Nickname==null){c.Nickname="";}
                                    html+="<div id='"+c.ID+"' class='cardThumbView'><div class='cardThumb_noBg cardThumbPart'><img rel='CardImages/"+c.FrontPic+"' onerror='' nload='' src='CardImages/"+c.FrontPic+"'><div class=''></div></div><div class='card_shadow cs_'></div><div class='cardIntro cardThumbPart'><p class='cardIntro_name'>"+c.Name+"</p><p class='cardIntro_title'>"+c.Nickname+"</p><p class='cardIntro_company'></p></div></div>";
                                }
                                $("#cardContainer").html(html);
                                initClickHandler();
                                $($("#cardContainer").children()[0]).trigger("click");
                            }else{
                                $("#cardViewWraper").text("");
                                $("#cardContainer").html("没有找到相关名片！");
                            }
                        } else {
                            $("#cardContainer").html("");
                            $.jqAlert(data.Message, "读取数据出错，请重试或联系管理员！");
                        }
                    }
                });
            });

            $("#search_condition").keydown(function(event){if(event.keyCode==13){
                $("#searchBtn").trigger("click");
            }});
            $(window).keydown(function(event){
                console.info("key down:"+event.keyCode);
                if(event.keyCode==13){
                
                return false;
            }});
        });

        function GetCard(id){
            $("#progressBarDiv").showProgressbar();
            $.ajax({ url: "Handler/CardHandler.ashx", data: "id=" + id, success: function (response) {
                        $("#progressBarDiv").hideProgressbar();
                        var data = $.parseJSON(response);
                        if (data.Result != undefined) {
                            $.jqAlert(data.Message, "获取数据出错"); return;
                        }
                        changeData(data);
                    },error:function(){$("#progressBarDiv").hideProgressbar();}
            });
        }
        
        $(function(){
            $("#chkSearchAll").click(function(){
                var data=null;
                if($("#chkSearchAll").get(0).checked){
                    data="searchall=true";
                }else{
                    data="searchall=false";
                }
                $.ajax({ url: "Handler/CardHandler.ashx?mode=setSearchAll", data: data, success: function (response) {}});
            });
            $("#sortOrder").change(function(){
                var data="sortOrder="+$("#sortOrder").val();
                $.ajax({ url: "Handler/CardHandler.ashx?mode=setSortOrder", data: data, success: function (response) {
                    //$("#searchBtn").trigger("click");
                    }
                });
            })
        });
    </script>
</asp:Content>
